<template>

	<!-- 疫苗 -->
		<view>疫苗预约</view>
	<view class="yimiao">
		<view class="y_one" @click="toWenzhen(item.title)" v-for="item in vaccine" :key="item.title" >
			<image :src="item.image" mode=""></image>		
			<view>{{item.title}}</view>
		</view>
	</view>
		<view>挂号，体检预约</view>
	<!-- 预约 -->
	<view class="yimiao">
	
		<view class="y_one" @click="turnKeshi(item.title)" v-for="item in reserve" :key="item.title" >
			<image :src="item.image" mode=""></image>		
			<view>{{item.title}}</view>
		</view>
	</view>
	<!-- 科室 -->
			<view>热门科室</view>
	<view class="yimiao">

		<view class="y_one" v-for="item in popular" style="width:220rpx;" :key="item.title" >
			<image :src="item.image" mode=""></image>		
			<view>{{item.title}}</view>
		</view>
	</view>
	<!-- 测试题 -->
		<view>自我测试</view>
	<view class="yimiao">
	
		<view class="y_one" v-for="item in self_test" :key="item.name"  @click="turnInfo(item.name)">
			<image :src="item.image" ></image>		
			<view>{{item.name}}</view>
		</view>
	</view>

</template>

<script setup>
	import {getIndexNav} from '@/api/home.js'
	
	import {ref} from 'vue'

	let vaccine=ref([])//疫苗
	let reserve=ref([])//预约挂号
	let popular=ref([])//科室
	let self_test=ref([])//自测题
	let getList=async ()=>{
		let res=await getIndexNav()
		console.log(res,"------------------")
		vaccine.value=res.data[0].vaccine;
		reserve.value=res.data[1].reserve;
		popular.value=res.data[2].popular;
		self_test.value=res.data[3].self_test;
				
	}
	getList();
	
	let turnInfo=(name)=>{ //跳转测试题模块
		console.log("1111")
			uni.navigateTo({
				url:"/pages/test/index?name="+name
			})
	}
	// 跳转 预约挂号 和 体检查询的
	let turnKeshi=(title)=>{
		console.log(title,"-------------")
		 if(title=="预约挂号"){
			 uni.navigateTo({
			 	url:"/pages/keshi/index"
			 })
		 }
		 if(title=="健康体检"){
			 uni.navigateTo({
			 	url:"/pages/tiJian/index"
			 })
		 }
	}
	
	// 跳转图文问诊等
	let toWenzhen=(title)=>{
		if(title=="图文咨询"){
			uni.navigateTo({ //图文问诊
				url:"/pages/picQuest/index"
			})
		}	
	}
	
</script>

<style lang="scss">
	.yimiao{
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		margin: 20px 0;
		flex-wrap: wrap;
	}
	.y_one{
		width: 180rpx;
		height: 180rpx;
		text-align: center;
		margin-top: 30rpx;
		image{
			width: 150rpx;
			height: 150rpx;
		}
	}
	
</style>